<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div class="root">
    <form action="#">
        <label>
            账号: <input type="text" name="account" v-model:value="userInfo.account">
        </label>
        <br>
        <br>
        <label>
            密码: <input type="password" name="password" v-model:value="userInfo.password">
        </label>
        <br>
        <br>
        性别:
        <label>
            男<input type="radio" v-model="userInfo.sex" value="man">
        </label>

        <label>
            女<input type="radio" v-model="userInfo.sex" value="woman">
        </label>
        <br>
        <br>

        <label>
            年龄:<input type="number" v-model.number="userInfo.age">
        </label>
        <br>
        <br>
        爱好:
        <label>
            <input type="checkbox" v-model="userInfo.hobby" value="smoking">抽烟
        </label>
        <label>
            <input type="checkbox" v-model="userInfo.hobby" value="drink">喝酒
        </label>
        <label>
            <input type="checkbox" v-model="userInfo.hobby" value="coding">敲代码
        </label>
        <br>
        <br>
        <label>
            所属校区:
            <select v-model="userInfo.option" name="option">
                <option value="b">北校区</option>
                <option value="n">南校区</option>
                <option value="d">东校区</option>
                <option value="x">西校区</option>
            </select>
        </label>
        <br>
        <br>
        <label>
            其他信息:
            <textarea style="resize: both" v-model="userInfo.text"></textarea>
        </label>
        <br>
        <label>
            <input type="checkbox" v-model="userInfo.agree">阅读并接收<a href="https://www.baidu.com"> 用户协议</a>
        </label>
        <br>
        <button type="submit" @click.prevent="demo">提交</button>
    </form>
</div>
<script>
    const vm = new Vue({
        el: '.root',
        data: {
            userInfo: {
                account: '',
                password: '',
                sex: '',
                age: '',
                hobby: [],
                option: '',
                agree: '',
                text: ''
            }
        },
        methods: {
            demo() {
                alert('表单提交了')
                console.log(
                    JSON.stringify(this.userInfo)
                )
            }
        }

    })

    /**
     *具有输入属性的input标签在输入后得到的值是字符串
     *我们可以使用原生html的type="number"属性设置其为数字类型,不允许输入字符串,但是在vue中收集到的数据还是字符串类型
     *如果想要vue收集到的数据为数字类型,可以使用v-model.number来设置输入的值为数字类型
     *
     *
     *收集表单数据总结:
     *  因为手收集的数据一般不会提交到form中action的地址中,会通过vue收集起来发送ajax请求,因此一般情况在表单标签中可以不使用name属性
     *  若:<input type:'text'>,则v-model收集的是表单的value值,数据绑定在v-model="存放收集数据的属性"
     *  若:<input type:'radio'>,则v-model收集的是表单的value值,数据绑定在v-model="存放收集数据的属性",并且要给标签配置value
     *  若:<input type:'checkbox'>
     *      1.若没有配置value,那么收集的就是布尔值,勾选true,不勾选false
     *      2.配置了value
     *          v-model绑定的属性的初始值是非数组,那么收集的就是布尔值,勾选true,不勾选false
     *          v-model绑定的属性的初始值是数组,那么收集到的value组成的数组
     *
     *备注:v-model的三个修饰符:
     *      lazy:失去焦点在收集数据
     *      number:输入的字符串转为有效数字
     *      trim:输入首位过滤空格
     */
</script>
</body>
</html>